<template>
  <div class="chartBox">
    <div id="education" ref="education">3</div>
    <div id="projectId" ref="projectId">2</div>
    <div id="companyId" ref="companyId">1</div>
    <!-- <div id="education" ref="education">3</div>
    <div id="certificate" ref="certificate">4</div> -->
  </div>
</template>

<script>
import { inject, onMounted, ref } from "vue";
const companyId = ref(null);
// const projectId = ref(null);
// const education = ref(null);
// const certificate = ref(null);
export default {
  name: "eChart",
  setup() {
    let $echarts = inject("echarts");
    // console.log($echarts);
    onMounted(() => {
      let companyChart = $echarts.init(
        document.getElementById("companyId"),
        "vintage"
      );
      companyChart.setOption({
        title: {
          text: "工作经历",
          textStyle: {
            //文字颜色
            color: "#fff",
            //字体大小
            fontSize: 30,
          },
          left: "center",
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          data: [
            {
              value: "超脑全签",
              textStyle: {
                fontSize: 24,
                color: "#fff",
              },
            },
            {
              value: "趣文科技",
              textStyle: {
                fontSize: 24,
                color: "#fff",
              },
            },
          ],
          //   data: ["超脑全签", "趣文科技"],
        },
        yAxis: {
          type: "time",
          min: `2013-12-16`,
          max: `2022-01-31`,
        },
        series: [
          {
            name: "",
            type: "bar",
            symbolSize: 10,
            stack: "Total",

            silent: true,
            itemStyle: {
              normal: {
                color: "#ee6666",
              },
            },
            data: ["2021-07-01", "2022-01-01"],
          },
          {
            name: "",
            type: "bar",
            stack: "Total",

            silent: true,
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "#080815",
              },
            },
            data: [null, "2021-07-19"],
          },
          //   {
          //     name: "降水量",
          //     type: "time",
          //     yAxisIndex: 0,
          //     data: [
          //      2013-12-16,
          //      2013-12-16
          //     ],
          //   },
          // {
          //   name: "Placeholder",
          //   type: "bar",
          //   stack: "Total",
          //   itemStyle: {
          //     borderColor: "transparent",
          //     color: "transparent",
          //   },
          //   emphasis: {
          //     itemStyle: {
          //       borderColor: "transparent",
          //       color: "transparent",
          //     },
          //   },
          //   data: [2015,2015],
          // },
          // {
          //   name: "工作年限",
          //   type: "bar",
          //   stack: "Total",
          //   label: {
          //     show: true,
          //     position: "inside",
          //   },
          //   data: [6, 2],
          // },
        ],
      }); // HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
      // var chart = echarts.init(dom, 'vintage');
      // ...
      let projectIdChart = $echarts.init(document.getElementById("projectId"));
      projectIdChart.setOption({
        title: {
          text: "项目介绍",
          textStyle: {
            //文字颜色
            color: "#fff",
            //字体大小
            fontSize: 30,
          },
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "项目介绍",
            type: "pie",
            radius: "66%",
            data: [
              {
                value: 2022,
                name: "班主课堂（PC）",
                id: "1",
                url: "https://www.ftbzclass.com",
              },
              {
                value: 2022,
                name: "班主课堂后台（PC）",
                id: "2",
                url: "http://admin.dev.ftbzclass.com",
              },
              {
                value: 2021,
                name: "猫九小说（PC）",
                id: "3",
                url: "http://www.maojiuxs.com/",
              },
              {
                value: 2021,
                name: "猫九小说作家中心（PC）",
                id: "4",
                url: "http://author.maojiuxs.com/author",
              },
              {
                value: 2021,
                name: "猫九小说（H5）",
                id: "5",
                url: "http://m.maojiuxs.com/",
              },
              {
                value: 2016,
                name: "喜谷数字脑（PC）后台管理系统 ",
                id: "6",
                url: "http://112.126.77.199:8061",
              },
              {
                value: 2020,
                name: "超脑全签官网",
                id: "7",
                url: "https://www.cnqqgroup.com/",
              },
              {
                value: 2018,
                name: "狐妖小红娘",
                id: "8",
                url: "https://a.qq.com/cp/a20180503love/index.htm",
              },
              {
                value: 2022,
                name: "VUE个人站",
                id: "9",
                url: "http://8.140.30.49/h5",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });

      projectIdChart.on("click", function (params) {
        console.log(params);
        window.open(params.data.url);
      });
      let educationChart = $echarts.init(document.getElementById("education"));
      educationChart.setOption({
        xAxis: {
          type: "category",
          data: ["JS", "ES6", "Jquery", "css", "小程序", "Vue","Node","webpack","uni-app","PS"],
        },
        yAxis: {
          type: "value",
           splitLine: { show: false },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
      //   let certificateChart = $echarts.init(certificate);
      //   console.log(companyChart);
    });
  },
  beforeCreate() {
    document.title = "个人战";
  },
};
</script>

<style lang="scss" scoped>
.chartBox {
  overflow: hidden;
  display: flex;
  height: calc(100vh - 60px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: #080815;
  flex-direction: row;
}
.chartBox > div {
  width: 50%;
  height: 50%;
}
#education {
  width: 100%;
  display: flex;
}
</style>